<template>
    <div class="container" :style="mainStyle">
        <a-row>
            <div style="margin-top: 100px;margin-bottom: 30px;text-align: center">
                <span class="howCool mainTile">{{ $t('menu.titleName') }}</span>
            </div>
        </a-row>
        <a-row type="flex" justify="center">
            <a-col span="6">
                <a-form-model ref="loginFormRef" :model="loginForm" :rules="loginRule">
                    <a-form-model-item prop="username">
                        <a-input
                                size="large"
                                v-model="loginForm.username"
                                autocomplete="off"
                                allow-clear
                                placeholder="username"
                        >
                            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item prop="password">
                        <a-input-password
                                v-model="loginForm.password"
                                size="large"
                                autocomplete="off"
                                allow-clear
                                placeholder="password"
                                @pressEnter="login"
                        >
                            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                        </a-input-password>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button style="width: 100%"
                                  type="primary"
                                  size="large"
                                  :loading="loginLoading"
                                  @click="login"

                        >Login
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-col>
        </a-row>


    </div>
</template>

<script>
    import {mapMutations} from 'vuex';
    import router from "../../router";
    import LoginService from "@/api/LoginService";

    export default {
        router,
        data() {
            return {
                mainStyle: {},
                loginForm: {
                    username: '',
                    password: ''
                },
                loginLoading: false,
                loginRule: {
                    username: [{required: true, message: this.$i18n.tc('menuItem.PleaseInputName'), trigger: ['blur', 'change']}],
                    password: [{required: true, message: this.$i18n.tc('menuItem.PleaseInputPassword'), trigger: ['blur', 'change']}]
                },
            };
        },
        computed: {},
        methods: {
            ...mapMutations(['setInitLoginFlag']),
            login() {
                this.$refs.loginFormRef.validate((valid) => {
                    if (valid) {
                        this.loginLoading = true;
                        LoginService.login({...this.loginForm})
                            .then((res) => {
                                if (res.data.token) { //页面登陆成功
                                    window.localStorage.setItem("userIdMes", this.loginForm.username);
                                    window.localStorage.setItem("access_token", res.data.token);

                                    this.$message.success(this.$i18n.tc('menuItem.LoginSuccess')); //显示成功信息
                                    // this.$message.success("登录成功!"); //显示成功信息
                                    this.setInitLoginFlag(true)

                                    this.$router.push({path: '/notice'});
                                } else { //页面登陆失败
                                    let msg = res.data.msg
                                    this.$message.warning(msg);
                                    // request.js axios配置中已经对登录模块进行了错误信息提示
                                    // if (msg === 'Bad credentials') {
                                    //     this.$message.warn("密码错误");
                                    // } else {
                                    //     this.$message.warn(msg);
                                    // }

                                }
                            }).finally(() => {
                            this.loginLoading = false;
                        });
                    }
                });
            },
            toUpper() {
                this.loginForm.username = this.loginForm.username.toUpperCase()
            },
        },
        created() {
        }
    };
</script>

<style scoped>
    .container {
        width: 100%;
        min-height: 100%;
        background-size: 100%;
        padding: 50px;
        position: relative;
        background-color: #f0f2f5;
        background-image: url("../../assets/loginBackgroup2.png");
    }

    .mainTile {
        font-size: 44px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        font-weight: 600;
    }


</style>
